<template>
  <div class="demo-wrap">
    <h1>一个人的信息</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="btnClick">传值</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  name: 'Demo',
  props: ['msg', 'school'],
  setup(props, context) {
    console.log('阿程测试--', context.slots);
    // 数据
    const person = reactive({
      name: '张三',
      age: 20
    });

    // 方法
    const btnClick = () => {
      context.emit('showSchool', props.school);
    };

    return {
      person,
      btnClick
    };
  }
};
</script>

<style lang="scss" scoped>
.demo-wrap {
  & > h1 {
    margin-bottom: 20px;
  }
  & > h2 {
    margin-bottom: 20px;
  }
  & > button {
    cursor: pointer;
  }
}
</style>
